<!--<el-date-picker>的二次封装-->
<template>
  <div class="z-date-range" :key="refreshKey">
    <el-date-picker
        v-model="currentDate[0]"
        type="date"
        size="mini"
        value-format="yyyy-MM-dd"
        :placeholder="placeholder[0]"
        :style="customStyle"
        :picker-options="pickerOptions1"
        v-bind="$attrs"
    >
    </el-date-picker>
    <span style="margin: 0 5px"> {{ separator }} </span>
    <el-date-picker
        v-model="currentDate[1]"
        type="date"
        size="mini"
        value-format="yyyy-MM-dd"
        :placeholder="placeholder[1]"
        :style="customStyle"
        :picker-options="pickerOptions2"
        v-bind="$attrs"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "zDateRange",
  components: {},
  props:{
    value:{
      type:Array,
      default:()=>{
        return []
      }
    },
    separator:{
      type: String,
      default:'-'
    },
    placeholder:{
      type: Array,
      default:()=>{
        return ['开始日期','截止日期']
      }
    },
    customStyle:{
      type: Object,
      default:()=>{
        return { width: '160px' }
      }
    },
    // 是否限制开始和结束日期的大小
    limit:{
      type: Boolean,
      default: true
    },
    // 最大间隔天数，0表示无最大间隔限制
    maxDays:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pickerOptions1:{},
      pickerOptions2:{},
      refreshKey:new Date().getTime()
    };
  },
  computed: {
    currentDate:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('input',val)
      }
    },
    maxDaysTime(){
      return  this.maxDays > 0 ? this.maxDays * 24 * 60 * 60 * 1000 : 0
    },
  },
  watch:{
    limit(val){
      if(!val){
        this.pickerOptions1 = {};
        this.pickerOptions2 = {};
      }
    },
    currentDate:{
      handler(val){
        if(this.limit){
          if(!val[0] && !val[1]){
            this.pickerOptions1 = {}
            this.pickerOptions2 = {}
          }else if(!val[0] && val[1]){
            this.pickerOptions1 = {
              disabledDate: (time) => {
                let choiceDateTime = new Date(val[1]).getTime(); //选中的日期
                if(this.maxDays > 0){
                  return time.getTime() > choiceDateTime || time.getTime() < choiceDateTime - this.maxDaysTime;
                }else{
                  return time.getTime() > choiceDateTime;
                }
              },
            }
            this.pickerOptions2 = {};
          }else if(val[0] && !val[1]){
            this.pickerOptions1 = {}
            this.pickerOptions2 = {
              disabledDate: (time) => {
                let choiceDateTime = new Date(val[0]).getTime(); //选中的日期
                if(this.maxDays > 0){
                  return time.getTime() < choiceDateTime - 8.64e7 || time.getTime() > choiceDateTime - 8.64e7 + this.maxDaysTime;
                }else{
                  return time.getTime() < choiceDateTime - 8.64e7;
                }
              },
            };
          }else if(val[0] && val[1]){
            this.pickerOptions1 = {
              disabledDate: (time) => {
                let choiceDateTime = new Date(val[1]).getTime(); //选中的日期
                if(this.maxDays > 0){
                  return time.getTime() > choiceDateTime || time.getTime() < choiceDateTime - this.maxDaysTime;
                }else{
                  return time.getTime() > choiceDateTime;
                }
              },
            }
            this.pickerOptions2 = {
              disabledDate: (time) => {
                let choiceDateTime = new Date(val[0]).getTime(); //选中的日期
                if(this.maxDays > 0){
                  return time.getTime() < choiceDateTime - 8.64e7 || time.getTime() > choiceDateTime - 8.64e7 + this.maxDaysTime;
                }else{
                  return time.getTime() < choiceDateTime - 8.64e7;
                }
              },
            };
          }
          this.refreshKey  = new Date().getTime();
        }
        this.$emit('onChangeDate',!val[0] && !val[1] ? [] : val)
      },
      deep:true,
      immediate:true
    }
  },
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.z-date-range{
  display: flex;
  align-items: center;
}
</style>
